import { defineComponent, h, createApp,ref } from 'vue'
import type {App,Ref} from 'vue'
import antd from 'ant-design-vue'
import HelloWorld from './HelloWorld.vue';
// const modules = import.meta.glob('./**/*.vue');

type Fn = (params?:any)=>void

class Serve{
  public instance!:App;
  private el!:Ref<HTMLDivElement> | undefined;
  private element!:Element;
  public visable = ref(false);
  public data = ref({})

  constructor(el?:Ref<HTMLDivElement>){
    this.el = el;
    this.element = document.createElement("div");
    document.body.appendChild(this.element);
  }

  public created(cname:any,fn:Fn) {
    const vm = defineComponent(()=>()=>
      h(cname,{
        visable:this.visable.value,
        modelValue:this.data.value,
        finished:fn.bind(this)
      })
    )
    if(this.element){
      this.instance = createApp(vm);
      this.instance.use(antd).mount(this.element);
    }
  }

  public open():void{
    this.visable.value = true

  }

  public close():void{
    this.visable.value = false
  }
}

const serve = new Serve()

const helloworld = (fn:Fn)=>{
  if(!serve.instance){
    serve.created(HelloWorld,fn)
  }

  return [serve.visable,serve.data.value]
}

export default {helloworld}